@mixin tagsBorderColor($color) {
  color: $color;

  // border: 1px solid $color;

  &:after {
    border: 1px solid $color;
  }
}

@mixin tagsBgColor($color) {
  color: #fff;
  background-color: $color;
}

.mui-tags {
  display: inline-block;
  padding: 0 px2rem(8);
  border-radius: px2rem(16);
  font-size: $fontCaption;
  position: relative;
}

.mui-tags_outline {
  &:after {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    content: ' ';
    top: 0;
    left: 0;
    border-radius: px2rem(16);
  }
}

$colorType:("normal":$colorTextMain,
"success":$colorSuccess,
"warn":$colorRed,
"link":$colorLink,
"primary":$colorPrimary);


@each $type,
$color in $colorType {
  .mui-tags_#{$type} {
    &.mui-tags_outline {
      @include tagsBorderColor($color);
    }

    &.mui-tags_bg {
      @include tagsBgColor($color);

      @if $type=='primary' {
        color: $colorTextMain;
      }
    }
  }
}

// .mui-tags_normal {
//   &.mui-tags_border {
//     @include tagsBorderColor($colorTextMain);
//   }

//   &.mui-tags_bg {
//     @include tagsBgColor($colorTextMain);
//   }
// }

// .mui-tags_success {
//   @include tagsBgColor($colorSuccess);
// }

// .mui-tags_link {
//   @include tagsBgColor($colorLink);
// }

// .mui-tags_warn {
//   @include tagsBgColor($colorRed);
// }

// .mui-tags_primary {
//   @include tagsBgColor($colorPrimary);
//   color: $colorTextMain;
// }

// .mui-tags_border {
//   &.mui-tags_normal {
//     @include tagsBorderColor($colorTextMain);
//   }

//   &.mui-tags_success {
//     @include tagsBorderColor($colorSuccess);
//   }

//   &.mui-tags_link {
//     @include tagsBorderColor($colorLink);
//   }

//   &.mui-tags_warn {
//     @include tagsBorderColor($colorRed);
//   }

//   &.mui-tags_primary {
//     @include tagsBorderColor($colorPrimary);
//   }
// }

// .mui-tags_bg {
//   &.mui-tags_normal {
//     @include tagsBgColor($colorTextMain);
//   }

//   &.mui-tags_success {
//     @include tagsBgColor($colorSuccess);
//   }

//   &.mui-tags_link {
//     @include tagsBgColor($colorLink);
//   }

//   &.mui-tags_warn {
//     @include tagsBgColor($colorRed);
//   }

//   &.mui-tags_primary {
//     @include tagsBgColor($colorPrimary);
//     color: $colorTextMain;
//   }
// }
